<template>
  <div id="footer" class="container-fluid">
    <div class="logo">
      <img :src="dataList.companyIcon" alt="logo图" />
    </div>
    <p class="title">{{ dataList.companyAbbreviation }}</p>
    <div class="address_tel_fax">
      <p>地址：{{ dataList.companyAddress }}</p>
    </div>
    <div class="email_wx">
      <p>电话：{{ dataList.companyPhone }}</p>
    </div>
    <!-- <p class="copy">Copyright &copy; 2021 - Now {{ company }}</p> -->
    <p class="copy">{{ dataList.companyCopyright }}</p>
  </div>
</template>

<script setup name="Footer">
import { ref, onMounted } from 'vue'
import axios from '../utils/axios';

const address = import.meta.env.VITE_APP_ADDRESS
const phone = import.meta.env.VITE_APP_PHONE
const email = import.meta.env.VITE_APP_EMAIL
const qq = import.meta.env.VITE_APP_QQ
const company = import.meta.env.VITE_APP_COMPANYNAME
const blog = import.meta.env.VITE_APP_BLOG
const qqgroup = import.meta.env.VITE_APP_QQGROUP

const dataList = ref({});

const getData = async () => {
  const res = await axios.get('/gwht/gw/foot/getInfo');
  if (res.code === 200) {
    // console.log(res.data, 'res.code==');
    dataList.value = res.data;
  }
}

onMounted(() => {
  getData();
});

</script>

<style scoped>
#footer {
  width: 100%;
  height: 100%;
  color: #fff;
  background: #474747;
  overflow: hidden;
  text-align: center;
}

.logo {
  width: 100px;
  height: 100px;
  margin: 0px auto 20px;
}

.logo img {
  width: 100px;
  height: 100px;
}

.title {
  margin-top: 20px;
  font-size: 25px;
  margin-bottom: 20px;
}

.address_tel_fax {
  color: #d3d3d3;
  font-size: 14px;
  margin: 10px 0;
}

.email_wx {
  color: #d3d3d3;
  font-size: 14px;
}

.copy {
  color: #d3d3d3;
  font-size: 14px;
  margin: 50px 0 10px;
}

@media screen and (max-width: 997px) {
  .title {
    font-size: 20px;
  }

  .address_tel_fax {
    font-size: 12px;
  }

  .email_wx {
    font-size: 12px;
  }

  .copy {
    font-size: 12px;
    margin: 30px 0 10px;
  }
}
</style>
